<!DOCTYPE html>
<html>
  <head>
    <title>{{title}}</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

    <script src="/socket.io/socket.io.js"></script>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>


  </head>
  <body>
    {{{body}}}
  </body>

<script>
  var numberOfFiles = 0;
  const downloadWebsite = document.getElementsByClassName('btn-success')[0];
  // connect to current socket.io server
  var socket = io.connect(document.URL);
  if(!localStorage['token'])
  localStorage['token']=generateToken(20);
  
  // wait for events for this token
  socket.on(localStorage['token'],(event)=>{
  console.log(event)
  document.getElementById('progress').hidden=false;
  if(event.progress=="Converting")
  {
    log.innerHTML=(`<h5>100%! Compressing your website...</h5><br>`)

  }
   else if(event.progress=="Completed")
   {
        document.getElementById('progress').hidden=true;
        log.innerHTML=(`<code>Compressing completed successfully !</code><br>`)
        downloadWebsite.style='display:'
        downloadWebsite.onclick=function()
        {
         window.location='/sites/'+event.file+".zip";
        }

   }
   else
   {
        const log = document.getElementById('log');
        if(event.progress.includes('200 OK'))
        numberOfFiles++;
        document.getElementById('nFilesP').hidden=false;
        document.getElementById('nFiles').innerHTML=numberOfFiles
        log.innerHTML=(`<code> ${event.progress}</code><br>`)
   }
  })
  
  // Download a website on click
   const downloadBtn =  document.getElementById("download");
   downloadBtn.onclick=()=>{
        var website = document.getElementById('website').value
        console.log("Now downloading the website ... %s",website)
        socket.emit('request', { token: localStorage['token'] , website});
   }





  // Generate token for each user for the first time.
  function generateToken(n) {
    var chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    var token = '';
    for(var i = 0; i < n; i++) {
        token += chars[Math.floor(Math.random() * chars.length)];
    }
    return token;
}
</script>
</html>

